import React, { useState } from 'react';
import { Modal, Drawer, Button, Spin, Form, message } from 'antd';
import FormRender from '@/components/FormRender';
import { getFellowLog, updateFellowLog } from '@/api';

import './index.less';

const { confirm } = Modal;

interface Props {
}

export default function useCustomerFellowLog() {
  const [form] = Form.useForm();
  const [customerId, setCustomerId] = useState<number>();
  const [fellowDrawerStatus, setFellowDrawerStatus] = useState(false);
  const [fellowList, setFellowList] = useState([]);
  const [loading, setLoading] = useState(false)

  const getFellowData = (id: number) => {
    const params = {
      customerId: id,
      pageNum: 1,
      pageSize: 9999,
    }
    setLoading(true);
    getFellowLog({ ...params }).then((data) => {
      if (data?.content) {
        setFellowList(data?.content)
        setLoading(false);
      }
    })
      .catch((err) => {
        throw (err);
        setLoading(false);
      });

  }

  const openFellowDrawer = async (status: boolean, id: number) => {
    setFellowDrawerStatus(status)
    if (!id) return;
    getFellowData(id);
    setCustomerId(id);
  }

  const submit = async () => {
    const values = await form.validateFields()
    if (!values) return;
    const postparams = {
      customerId,
      followUpType: 'PHONE',
      followUpContent: values?.followUpContent,
    }
    updateFellowLog({ ...postparams }).then((data) => {
      if (data) {
        message.success('提交成功')
        getFellowData(customerId as number);
      }
    })
      .catch((err) => {
        throw (err)
      });
  }

  const formItemList = [
    {
      title: '',
      Items: [
        {
          label: '跟进记录',
          name: 'followUpContent',
          type: 'textarea',
          rules: [
            { required: true },
            { max: 1024 }
          ]
        },
      ],
    }
  ];

  const fellowDrawer = (
    <Drawer
      title="跟进记录"
      destroyOnClose={true}
      open={fellowDrawerStatus}
      width={720}
      onClose={() => {
        form?.resetFields();
        setFellowDrawerStatus(false)
      }}
    >
      <Spin spinning={loading}>
        <div className='fellow-list-container'>
          {
            fellowList?.length > 0 ?
              <>
                {
                  fellowList.map((item) => {
                    return (
                      <div className='fellow-box'>
                        <div className='fellow-content'>
                          <span className='label'>跟进内容：</span>
                          {item?.followUpContent}
                        </div>
                        <span className='fellow-user'>
                          <span className='label'>跟进人：</span>{item?.followUpUserName}
                        </span>
                        <span className='fellow-time'>
                          <span  className='label'>跟进时间：</span>{item?.createTime}
                        </span>

                      </div>
                    );
                  })
                }
              </>
              :
              <div className='fellow-none'>暂无跟进记录</div>

          }
        </div>
        <FormRender
          defaultData={{}}
          form={form}
          formItem={formItemList}
        />
        <Button type="primary" onClick={submit} style={{ marginLeft: '25%' }}>提交</Button>
      </Spin>
    </Drawer>
  )

  return [openFellowDrawer, fellowDrawer];
}